<template>
	<view class="companyInfo">
		<view class="companyInfo-content ff-bg-fff ff-font-14 ff-color-222 ff-margin-12 ff-border-radius-10">
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">单位名称</view>
				<input :disabled="editState" class="ff-text-right" placeholder="请输入" placeholder-style="color:#999"
					type="text" v-model.trim="companyInfo.company.companyName" />
			</view>
			<view>
				<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
					<view class="companyInfo-content-title ff-color-999">单位类型</view>
					<view>
						<view v-if="editState">
							<view>{{ companyTypeName }}</view>
						</view>
						<view v-else class="ff-flex" @click="unitTypeClick">
							<view v-if="companyInfo.company.companyType == ''">请选择</view>
							<view v-else>{{ companyTypeName }}</view>
							<u-icon color="#999" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<!-- 单位类型弹框 -->
				<u-select v-model="unitType" :safe-area-inset-bottom="true" label-name="macroName"
					value-name="macroCode" @confirm="confirmUnit" :list="unitList"></u-select>
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15"
				v-if="companyInfo.company.companyType == 4">
				<view class="companyInfo-content-title ff-color-999">业委会或其他代码（选填）</view>
				<input :disabled="true" :class="{ activeDisalbe: !editState }" style="width: 300rpx;"
					class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="text"
					v-model.trim="companyInfo.company.communityCode" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">社会信用代码</view>
				<view :class="{ activeDisalbe: !editState }" class="ff-text-right">
					{{ companyInfo.company.organizationCode }}
				</view>
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">所属区域</view>
				<view :class="{ activeDisalbe: !editState }" class="ff-text-right">{{ companyInfo.areaName }}</view>
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">所属消防救援机构</view>
				<view :class="{ activeDisalbe: !editState }" class="ff-text-right">{{ companyInfo.departmentName }}
				</view>
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">单位注册地址</view>
				<view>
					<view v-if="editState" class="ff-text-right">
						<view class="ff-line-height-1-3">{{ companyInfo.company.companyAddr }}</view>
					</view>
					<view v-else class="ff-flex ff-text-right" @click="unitRegisterAddress">
						<view v-if="companyInfo.company.companyAddr == ''">请选择</view>
						<view class="ff-line-height-1-3" v-else>{{ companyInfo.company.companyAddr }}</view>
						<u-icon color="#999" name="map-fill"></u-icon>
					</view>
				</view>
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">实际办公地址</view>
				<view>
					<view v-if="editState" class="ff-text-right">
						<view class="ff-line-height-1-3">{{ companyInfo.company.officeAddr }}</view>
					</view>
					<view v-else class="ff-flex ff-text-right" @click="ActualOfficeAddress">
						<view v-if="companyInfo.company.officeAddr == ''">请选择</view>
						<view class="ff-line-height-1-3" v-else>{{ companyInfo.company.officeAddr }}</view>
						<u-icon color="#999" name="map-fill"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="companyInfo-content ff-bg-fff ff-font-14 ff-color-222 ff-margin-12 ff-border-radius-10">
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">消防安全管理人姓名</view>
				<input :disabled="editState" class="u-text-right" placeholder="请输入" placeholder-style="color:#999"
					type="text" v-model.trim="companyInfo.company.fireManageName" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">消防安全管理人手机号码</view>
				<input :disabled="editState" class="u-text-right" placeholder="请输入" placeholder-style="color:#999"
					type="number" v-model.trim="companyInfo.company.fireManagePhone" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">消防安全责任人姓名</view>
				<input :disabled="editState" class="u-text-right" placeholder="请输入" placeholder-style="color: #BCBFCC"
					type="text" v-model.trim="companyInfo.company.fireDutyName" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="companyInfo-content-title ff-color-999">消防安全责任人手机号</view>
				<input :disabled="editState" class="u-text-right" placeholder="请输入" placeholder-style="color:#999"
					type="number" v-model.trim="companyInfo.company.fireDutyPhone" />
			</view>
		</view>
		<view class="companyInfo-but" v-if="roleStatus == 0">
			<view v-if="editState" class="companyInfo-but-edit"><u-button type="primary" shape="circle"
					@click="upateCompanyClick">修改单位信息</u-button></view>
			<view class="ff-flex-between" v-else>
				<view class="companyInfo-but-list"><u-button shape="circle" @click="cancelClick" plain>取消修改</u-button>
				</view>
				<view class="companyInfo-but-list"><u-button type="primary" shape="circle"
						@click="confirmClick">确认修改</u-button></view>
			</view>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'companyInfo',
		data() {
			return {
				// 单位类型
				unitList: [], // 单位类型列表数据
				unitType: false, // 单位类型显/隐
				companyTypeName: '', // 单位类型名字
				companyInfo: {}, // 单位详情
				editState: true // 是否可以修改
			};
		},
		onLoad(e) {
			this.getCompanyInfo(); // 获取单位信息数据
			this.getUnitList(); // 获取单位列表数据
		},
		computed: {
			...mapState({
				roleStatus: modules => modules.infoList.roleStatus
			})
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 获取单位信息数据
			async getCompanyInfo() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/user/info'
				});
				// console.log('获取单位信息数据------', data);
				if (data.code == 200) {
					this.companyInfo = data.data;
					this.companyTypeName = this.companyInfo.company.companyTypeName;
					this.setUserInfo(data.data);
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 获取单位列表数据
			async getUnitList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/macro/catalog/company_type'
				});
				//console.log('请求单位类型列表数据-----', data);
				if (data.code == 200) {
					this.unitList = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击显示单位弹框
			unitTypeClick() {
				this.unitType = true;
			},
			// 确定单位类型
			confirmUnit(e) {
				// console.log('单位类型确定的数据----', e);
				this.companyInfo.company.companyType = e[0].value;
				this.companyTypeName = e[0].label;
			},
			// 单位注册地址
			unitRegisterAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('获取单位注册地址数据---------', res);
						that.companyInfo.company.companyAddr = that.$check.emptySpecial(res
							.address); // 单位注册地址，清除特殊字符
						that.companyInfo.company.latitude = res.latitude; // 单位纬度
						that.companyInfo.company.longitude = res.longitude; // 单位经度
					},
					fail(error) {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			// 实际办公地址
			ActualOfficeAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('获取实际办公地址数据---------', res);
						that.companyInfo.company.officeAddr = that.$check.emptySpecial(res
							.address); // 单位注册地址，清除特殊字符
						that.companyInfo.company.officeLatitude = res.latitude; // 单位纬度
						that.companyInfo.company.officeLongitude = res.longitude; // 单位经度
					},
					fail(error) {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			// 点击编辑单位信息
			upateCompanyClick() {
				this.editState = false;
			},
			// 取消修改
			cancelClick() {
				this.editState = true;
				this.getCompanyInfo(); // 获取单位信息数据
			},
			// 确认修改
			confirmClick() {
				if (!this.companyInfo.company.companyName) {
					this.$refs.uToast.show({
						title: '请填写单位名称',
						type: 'error'
					});
					return;
				}
				if (!this.companyTypeName) {
					this.$refs.uToast.show({
						title: '请选择单位类别',
						type: 'error'
					});
					return;
				}
				if (!this.companyInfo.company.companyAddr) {
					this.$refs.uToast.show({
						title: '请选择单位注册地址',
						type: 'error'
					});
					return;
				}
				if (!this.companyInfo.company.officeAddr) {
					this.$refs.uToast.show({
						title: '请选择实际办公地址',
						type: 'error'
					});
					return;
				}
				if (!this.companyInfo.company.fireManageName) {
					this.$refs.uToast.show({
						title: '请填写消防安全管理人姓名',
						type: 'error'
					});
					return;
				}
				let reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
				if (!reg.test(this.companyInfo.company.fireManagePhone)) {
					this.$refs.uToast.show({
						title: '请正确填写消防安全管理人电话',
						type: 'error'
					});
					return;
				}
				if (!this.companyInfo.company.fireDutyName) {
					this.$refs.uToast.show({
						title: '请填写消防安全责任人姓名',
						type: 'error'
					});
					return;
				}
				if (!reg.test(this.companyInfo.company.fireDutyPhone)) {
					this.$refs.uToast.show({
						title: '请正确填写消防安全责任人电话',
						type: 'error'
					});
					return;
				}
				let params = {
					id: this.companyInfo.company.id,
					companyName: this.companyInfo.company.companyName,
					companyType: this.companyInfo.company.companyType,
					companyAddr: this.companyInfo.company.companyAddr,
					latitude: this.companyInfo.company.latitude,
					longitude: this.companyInfo.company.longitude,
					officeAddr: this.companyInfo.company.officeAddr,
					officeLatitude: this.companyInfo.company.officeLatitude,
					officeLongitude: this.companyInfo.company.officeLongitude,
					fireManageName: this.companyInfo.company.fireManageName,
					fireManagePhone: this.companyInfo.company.fireManagePhone,
					fireDutyName: this.companyInfo.company.fireDutyName,
					fireDutyPhone: this.companyInfo.company.fireDutyPhone
				};
				this.$refs.loading.openLoading('提交中···'); // 打开loading动画
				this.$http
					.post({
						url: '/company/updateCompany',
						data: params
					})
					.then(res => {
						// console.log('单位信息修改后提交的结果------', res);
						this.$refs.loading.closeLoading(); // 关闭loading动画
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '修改成功',
								type: 'success'
							});
							this.editState = true;
							this.getCompanyInfo(); // 获取单位信息数据
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.companyInfo {
		&-content {
			.ff-text-right {
				width: 400rpx;
			}
		}

		&-but {
			&-edit {
				width: 90%;
				margin: 10% 5%;
			}

			&-list {
				width: 46%;
				margin: 10% 5%;

				/deep/.u-size-default {
					height: 90rpx !important;
					line-height: 90rpx !important;
					color: #95979e;
					border-color: #95979e;
				}
			}
		}
	}

	.activeDisalbe {
		color: #d3d3d3 !important;
	}

	/deep/.u-btn--primary {
		color: #ffffff !important;
		border-color: #3178ff !important;
		background-color: #3178ff !important;
	}
</style>